.me-profile {
    margin-bottom: var(--space-s);

    .info {
        display: flex;
    }

    dl {
        margin: 0 0 0 var(--space-m);
        line-height: 1.5;
        font-size: 110%;

        dt {
            font-weight: bold;
            width: 150px;
            text-align: right;
            float: left;
            clear: both;
        }

        dd {
            float: left;
            margin-left: var(--space-xs);
        }
    }

    p {
        line-height: 1.5;
    }

    @media only screen and (max-width: 550px) {
        .info img { display: none; }
    }
}

.me-email {
    margin-bottom: var(--space-m);
    display: flex;
    flex-direction: column;
}

.notifications {
    margin-bottom: var(--space-s);
}

.checkbox-input {
    display: grid;
    grid-template:
        "checkbox label" auto
        "- note" auto /
        auto 1fr;
    row-gap: var(--space-3xs);
    column-gap: var(--space-xs);
}

.label {
    grid-area: label;
    font-weight: bold;
}

.note {
    grid-area: note;
    display: block;
    font-size: 85%;
}

.buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-s);
}
